<template>
	<view :class="['card-item', props.clasName]" @tap="tapFn">
		<image :src="`/static/${imgName}.png`" alt="" class="img"></image>
		<view class="card-info">
			<view class="text">{{text}}</view>
			<view class="num">
				<text class="number">{{num}}</text>
				<image src="/static/firstpage/up.png" alt="" class="img2" v-if="rate&&rate>=0"></image>
				<image src="/static/firstpage/down.png" alt="" class="img2" v-if="rate&&rate<0"></image>
				<text :class="rate>0?'percent':'percent2'"  v-if="rate">{{Math.abs(rate)}}%</text>
			</view>
		</view>
	</view>
</template>

<script setup>
const props = defineProps({
	imgName: String, 
	text: String, 
	num: [Number,String], 
	rate: [Number,String], 
	rows: {type: Number, default: 1},
	clasName: String,
	url: String
})
const emit = defineEmits(['ontap'])
const tapFn = ()=> {
	emit('ontap', {
		text: props.text,
		url: props.url
	})
}
</script>

<style lang="scss" scoped>
.card-item {
	display: flex;
	width: 50%;
	margin-top: 30rpx;
	cursor: pointer;
	}
.img {
	width: 41rpx;
	height: 41rpx;
}
.text {
	font-size: 30rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #1B1D20;
	margin-left: 18rpx;
	line-height: 45rpx;
}
.num {
	font-size: 30rpx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #1B1D20;
	margin-left: 14rpx;
	line-height: 45rpx;
	min-width: 60rpx;
}
.card-info {
	flex: 1;
	display: flex;
}
.img2 {
	width: 13rpx;
	height: 19rpx;
	margin-left: 16rpx;
}
.percent {
	font-size: 26rpx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #FB453B;
	margin-left: 5rpx;
}
.percent2 {
	@extend .percent;
	color: #219821;
}
.card-item.banjian-card-item {
	width: 50%;
	min-width: 50%;
	&.txtColor {
		.card-info{
			.text {
				color: #1B1D20!important;
			}
		}
	}
	.img {
		width: 78rpx;
		height: 78rpx;
	}
	.card-info {
		.num,.text {
			color: #455BDF;
		}
	}
}
</style>